iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0
Modern Web

Google Apps Script 整合運用系列 第 22

客戶刪除

  • 分享至 

  • xImage
  •  

客戶刪除

  1. 確認畫面:我們希望,點擊刪除後,有一個畫面可以確認

sweetalert2

  1. 官網:https://sweetalert2.github.io/
  2. 安裝:
<!-- sweetalert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  1. 選擇適合範例
Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
  1. window.operateEvents

  window.operateEvents = {
    'click .show': function (e, value, row, index) {//顯示單筆
      alert('查詢');//         
    },
    'click .edit': function (e, value, row, index) {
      top.location.href='<?= global.url ?>?op=form_custom&sn='+row['sn']
    },
    'click .delete': function (e, value, row, index) {
      Swal.fire({
        title: '確認刪除?',
        text: row.title,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '是的,刪除',
        cancelButtonText: '取消'
      }).then((result) => {
        if (result.isConfirmed) {
          //----- 執行刪除 工作表記錄 表格本列資料
          Swal.fire(
            '刪除完成',
            row.title,
            'success'
          )
        }
      })  
    }
  } 

刪除 工作表記錄

  1. 透過 google.script.run 至後台刪除該記錄,再回傳是否成功

          //----- 執行刪除 工作表記錄 表格本列資料          
          setIdAttribute('main-content','d-none');                                  //關閉主畫面
          setIdAttribute('show','my-5');                                            //開啟等待畫面
          google.script.run.withSuccessHandler(onDelSuccess).delete_custom(row.sn); //回傳畫面:onDelSuccess 後台刪除函式:delete_custom(row.sn)
  1. 回傳畫面:onDelSuccess

    /*===============================
    資料寫入成功,回傳
    ===============================*/    
    function onDelSuccess(respond) { 
      if(respond.result){                
        // 刪除 tr 
        $('#table').bootstrapTable('remove', {
          field: 'sn',
          values: [respond.sn]
        });
        Swal.fire(respond.message); 
      }else{
        Swal.fire({
          title: '執行錯誤',
          text: respond.message,
          icon: 'error'
        }); 
      }
      
      setIdAttribute('main-content','');      //開啟主畫面
      setIdAttribute('show','d-none');//關閉等待畫面
    } 
  1. 後台刪除畫面:delete_custom(row.sn)

/* ==========================
  商品 刪除函式(admin)
============================*/
function delete_custom(sn) {
  let sheet = 'day2';
  let colIndexSn = 1;
  let rowIndex, colData, arrIndex;
  let respond = {};
  if ("undefined" == typeof (sn) || sn == "") {
    respond = {
      result: false,
      message: "沒有傳流水號sn",
      sn: sn
    }
    return respond;
  } else {
    colData = Sheet.getColData(sheet, colIndexSn);
    arrIndex = colData.indexOf(parseInt(sn));
    if (arrIndex == -1) {
      respond = {
        result: false,
        message: "無此流水號的資料",
        sn: sn
      }
      return respond;
    }
    rowIndex = arrIndex + 2;
  }

  // 刪除某筆資料
  let ws = Sheet.getWs(sheet);
  ws.deleteRow(rowIndex);

  respond = {
    result: true,
    message: "記錄刪除成功",
    sn: sn
  }
  return respond;
}



上一篇
編輯客戶資料
下一篇
查詢頁面
系列文
Google Apps Script 整合運用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言